<template>
  <el-container style="margin-top: 10px">
    <el-header>
      <el-card style="height: 75px">
        <div style="display: inline-block;margin-left: 20px">
          <el-input placeholder="搜索" size="mini" v-model="query_field"/>
        </div>

        <el-button
          circle
          type="primary"
          icon="el-icon-search"
          @click="searchTeacher"
        />
      </el-card>
    </el-header>

    <el-main>
      <el-card>
        <el-table v-loading="loading" :data="recordList">
          <el-table-column align="center" prop="name" label="姓名" />
          <el-table-column align="center" prop="company" label="公司" />
          <el-table-column align="center" prop="job" label="职务" />
          <el-table-column align="center" prop="phone" label="手机号" />
          <el-table-column align="center" prop="course_name" label="课程" />
          <el-table-column align="center" prop="chapter_name" label="课题" />
          <el-table-column align="center" prop="comment_time" label="评价时间" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="hanldePreview(scope.row)"
              >查看评价</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>

    <el-footer style="height: 85px">
      <el-card>
        <el-pagination
          style="text-align: center;"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-footer>
    
    <el-dialog title="评价详情" :visible.sync="dialogVisible" width="700px" >
      <div class="title">
        <div  class="left" >
         问题
        </div>
        <div  class="right">
          答案
        </div>
      </div>
      <div style='overflow: auto;height:500px'>
        <div v-for="(item,index) in commentInfo" :key="index"  class="ans" >
          <div v-if='item.answer_type ==1'  class="item">
            <div  class="item_title">{{item.question_name}}{{item.pick_type==1?'（单选）':'（多选）'}}</div>
            <div class="item_right">
              <div v-for="(item2,index2) in item.answer_list"  :key="index2" class="item_right_item">
                <div class="item_text">
                  {{item2.content}} 
                </div>
                <div class="item_select">
                  {{item2.pick?'√':''}}
                </div>

              </div>
            </div>
           
          </div>
          <div v-if='item.answer_type == 2'  class="item" >
            <div class="item_title">{{item.question_name}}</div>
            <div class="item_right" style="border-bottom:1px solid #ddd">{{item.answer_text}}</div>
          </div>
       
        </div>
        
      </div>
      
    </el-dialog>
  </el-container>
</template>

<script>
import { getCommentList, commentInfo } from '@/api/otherAPI.js'
import { isArray } from 'util'
export default {
  data() {
    return {
      disabled: false,
      loading: false,
      query_field: '',
      recordList: [],
      commentInfo:[],
      total: 0,
      page: 1,
      pageSize: 10,
      dialogVisible: false,
    }
  },
  mounted() {
    this.getCommentList()
  },
  methods: {
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //     if (columnIndex === 0) {
    //       if (rowIndex % 2 === 0) {
    //         return {
    //           rowspan: 2,
    //           colspan: 1
    //         };
    //       } else {
    //         return {
    //           rowspan: 0,
    //           colspan: 0
    //         };
    //       }
    //     }
        
    // },

    searchTeacher() {
      this.getCommentList()
    },
    getCommentList() {
      this.loading = true
      const params = {
        query_field: this.query_field,
        page: this.page,
        page_size: this.pageSize
      }
      getCommentList(params).then(res => {
        this.recordList = res.data.list
        this.total = res.data.paginate.total
        this.loading = false
      })
    },
    handleCurrentChange(e) {
      this.page = e
      this.getCommentList()
    },
    hanldePreview(row) {
      let obj = {
        user_id: row.user_id,
        chapter_id: row.chapter_id
      }
      commentInfo( obj ).then( res=>{
       
        this.commentInfo = res.data.question_info
        console.log(this.commentInfo)
        
      } )
      //
      this.dialogVisible = true
      this.createOrUpdate = 'update'
     
    },
    createChapter(){

    }
  }
}
</script>

<style scoped="scoped">
.title{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
   border-bottom: 1px solid #dddddd;
}
.title .left{
  width: 30%;
}
.title .right{
  width: 70%;
}
.ans{
  width: 100%;
  text-align: center;
  font-size:16px;
  line-height: 30px;

}
.ans .item{
  display: flex;
  align-items:stretch;
}
.ans .item .item_title{
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #dddddd;
  padding: 5px;
}
.ans .item .item_right{
  width: 70%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #dddddd;
}
.ans .item .item_right .item_right_item{
  display: flex;
  

}
.ans .item .item_right .item_right_item .item_text{
    width: 80%;
    border-bottom: 1px solid #dddddd;
    padding: 5px;
    text-align: left;
}
.ans .item .item_right .item_right_item .item_select{
 width: 20%;
 border-left: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}


</style>
